<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="wrap">
      <!-- 显示作物的数量 -->
      <div class="table_top">仓库:
          <div class="table_left">樱桃:0</div>
          <div class="table_zhong1">番茄:0</div>
          <div class="table_zhong2">橘子:0</div>
          <div class="table_right">茄子:0</div>
      </div>
      <!-- 菜地 -->
      <div class="wai" onclick="zzz()"></div>
      <div class="cai" onclick="ccc()"></div>
      <div class="tudi">
      </div>
      <div class="caidan">
      </div>
  </div>
</body>

<style>
  @keyframes dong {
      0% {
          transform:scale(1,1);
      }

      50% {
          transform:scale(1.2,1.2);
      }

      100% {
          transform:scale(1,1);
      }
  }

  /* 成熟动画 */
  #chengshu {
      background-size: cover;
      background-position: center;
      animation: dong 2s linear 0s infinite;
  }

  /* 背景 */
  .wrap {
      width: 750px;
      height: 1333px;
      border: 1px solid black;
      margin: 0 auto;
      position: relative;
      background-image: url(./nc/图层\ 41.png);
      background-size: cover;
      background-position: center;
      position: relative;
      top: 50px;
  }

  /* 土地大背景 */
  .tudi {
      width: 300px;
      height: 385px;
      box-sizing: border-box;
      padding: 100px 25px;
      position: absolute;
      top: 95px
  }

  /* 小块土地 */
  .tudi>div {
      width: 217px;
      height: 103px;
      box-sizing: border-box;
      float: left;
      line-height: 80px;
      text-align: center;
      font-size: 20px;
      background-size: cover;
      background-position: center;
      position: absolute;
      /* top: 691px;
      left: 442px; */
      border-radius: 50%;
  }

  /* 菜单背景 */
  .caidan {
      position: absolute;
      width: 300px;
      height: 65px;
      box-sizing: border-box;
      padding: 0px 10px;
      top: 386px;

  }

  /* 菜单小图标 */
  .caidan>div {
      width: 131px;
      height: 122px;
      box-sizing: border-box;
      float: left;
      color: rgb(0, 0, 0, 0);
      line-height: 50px;
      text-align: center;
      background-size: cover;
      background-position: center;
      position: absolute;
      top: 707px;
  }

  /* 选中提示 */
  .xuan {
      transform: scale(1.15, 1.15);
      /* background-color: yellow; */
  }

  /* 挖div */
  .wai {
      position: absolute;
      width: 74px;
      height: 83px;
      display: none;
      background-image: url(./nc/chan.png);
      background-size: cover;
      background-position: center;
      top: 940px;
      right: 70px;
  }

  /* 采摘div */
  .cai {
      position: absolute;
      width: 107px;
      height: 95px;
      left: 35px;
      display: none;
      background-image: url(./nc/cai.png);
      background-size: cover;
      background-position: center;
      top: 940px;
  }

  /* 植物 */
  .zhiwu {
      width: 217px;
      height: 103px;
      background-image: url(./nc/植物.png);
      background-size: 71px 69px;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 50%;
      position: absolute;
      /* top: 10px; */
      /* left: 10px; */

  }
  span{
      width: 100%;
      height: 20%;
      position: absolute;
      top:-10px;
      left: 10px;
      font-size: 20px;
      color: red;
  }
  .table_top{
      width: 100%;
      height: 150px;
      border: 1px solid green;
      /* background-color: white; */
      position: absolute;
      top: 110px;
      border-radius: 30px;
      font-size: 50px;
      line-height: 150px;
  }
  .table_left{
      width: 150px;
      height: 100px;
      /* border: 1px solid red; */
      /* background-color: white; */
      position: absolute;
      top: 25px;
      left: 120px;
      border-radius: 30px;
      font-size: 35px;
      line-height: 100px;
  }
  .table_right{
      width: 150px;
      height: 100px;
      /* border: 1px solid red; */
      /* background-color: white; */
      position: absolute;
      top: 25px;
      right: 10px;
      border-radius: 30px;
      font-size: 35px;
      line-height: 100px;
  }
  .table_zhong1{
      width: 150px;
      height: 100px;
      /* border: 1px solid red; */
      /* background-color: white; */
      position: absolute;
      top: 25px;
      right: 166px;
      border-radius: 30px;
      font-size: 35px;
      line-height: 100px;
  }
  .table_zhong2{
      width: 150px;
      height: 100px;
      /* border: 1px solid red; */
      /* background-color: white; */
      position: absolute;
      top: 25px;
      left: 275px;
      border-radius: 30px;
      font-size: 35px;
      line-height: 100px;
  }
</style>
<script>
  //获取界面元素，当时不会封装，直接一个一个获取
  var tudi = document.querySelector(".tudi")
  var caidan = document.querySelector(".caidan")
  var shan = document.querySelector(".wai")
  var cai = document.querySelector(".cai")
  var cang_ku = []
  
  //浪费（忘记干嘛的了）
  var table_a = document.querySelector(".table_left")
  var table_b = document.querySelector(".table_zhong1")
  var table_c = document.querySelector(".table_zhong2")
  var table_d = document.querySelector(".table_right")
  
  //土地坐标（对着界面一个一个比划得出来的，现在想想那时候可真逗）
  var zuobiao2_list = {
      0: [691, 22],
      1: [790, 240],
      2: [686, 445],
      3: [738, 345], 
      4: [588, 243],
      5: [638, 132],
      6: [636, 340],
      7: [742, 137],
      8: [691, 232],
      
  }
  
  //土地用js的方法直接生成，不然就一个一个画
  function jia(num) {
      for (var i = 0; i < num; i++) {
          var one_div = document.createElement("div")
          one_div.setAttribute("sx", i)
          one_div.style.backgroundImage = "url(./nc/黑地.png)"
          one_div.style.left = zuobiao2_list[i][1] + "px"
          one_div.style.top = zuobiao2_list[i][0] + "px"
          one_div.setAttribute("onclick", "xxx(this)")
          one_div.status = "kong"
          tudi.append(one_div)
      }
  }
  jia(9)
  
  //植物列表
  var zuobiao_list = [69, 228, 389, 548]
  var caidan_list = ['樱桃', '番茄', '橘子', '茄子']
  //'0樱桃', '1番茄', '2橘子', '3茄子'
  
  //菜单生成
  function jia2(num) {
      for (var i = 0; i < num.length; i++) {
          var one_div = document.createElement("div")
          one_div.setAttribute("zx",i)
          one_div.setAttribute("onclick", "yyy(this,"+i+")")
          one_div.style.left = zuobiao_list[i] + "px"
          one_div.style.backgroundImage = "url(./nc/" + i + ".png)"
          caidan.append(one_div)
      }
  }
  jia2(caidan_list)
  
  //土地选中 kuai需要在这定义，放在前面会导致土地还未导入 数量为0
  var kuai = document.querySelectorAll(".tudi>div")
  function xxx(kuai_div) {
      for (var i = 0; i < kuai.length; i++) {
          if (kuai_div == kuai[i]) {
              kuai[i].className = 'xuan'
              if (kuai[i].status == 'kong') {
                  shan.style.display = 'none'
                  cai.style.display = 'none'
              }
              else if(kuai[i].status == 'zhang') {
                  shan.style.display = 'block'
              }else{
                  shan.style.display = 'block'
                  cai.style.display = 'block'
              }
          }
          else {
              kuai[i].className = ""
          }
      }
  }
  
  var str;
  //土地种菜
  function yyy(n,b) {
      for (var i = 0; i < kuai.length; i++) {
          var one_div = document.createElement("div")
          if (kuai[i].className == "xuan") {
              if (kuai[i].status == "kong") {
                  one_div.className = 'zhiwu'
                  kuai[i].append(one_div)
                  // 元素转换
                  str = kuai[i].innerHTML
                  // console.log(one_div)
                  // console.log(yyy)
                  //增加定时器
                  kuai[i].all_time = 1000
                  // kuai[i].all_time = b*20000+5000
                  kuai[i].start_time = 0
                  //显示铲除按钮
                  shan.style.display = 'block'
                  //改变状态
                  kuai[i].status = "zhang"
                  //改变当前土地的id 用于后面成熟切换图标
                  kuai[i].setAttribute('sx',n.getAttribute('zx'))
                  //计时器 倒计时
                  var dao_time=kuai[i].all_time - 0
                  dao_time = time(dao_time)
                  kuai[i].innerHTML = str + "<span>"+dao_time+"</span>"
              }
          }
      }
  }
  
  // 铲除植物
  function zzz() {
      for (var i = 0; i < kuai.length; i++) {
          if (kuai[i].className == "xuan") {
              kuai[i].innerHTML = ''
              kuai[i].status="kong"
              kuai[i].style.backgroundImage = "url(./nc/黑地.png)"
              kuai[i].style.backgroundSize = "cover"
              shan.style.display = 'none'
              cai.style.display = 'none'
          }
      }
  }
  
  //采摘
  function ccc() {
      for (var i = 0; i < kuai.length; i++) {
          if (kuai[i].status == "chengshu" && kuai[i].className == "xuan") {
              var a = kuai[i].getAttribute("sx")
              caidan_list[a] 
              cang_ku.push(caidan_list[a])
              kuai[i].innerHTML = ''
              kuai[i].style.backgroundImage = "url(./nc/黑地.png)"
              kuai[i].style.backgroundSize = "cover"
              cai.style.display = 'none'
              kuai[i].status = "kong"
              //仓库显示
              
          }
      }
      //产物的数量，当时本地存储都不会，刷新界面直接归零，所以这个游戏没法玩，看看就行了
      var a = 0
      var b = 0
      var c = 0 
      var d = 0 
      for(var j=0;j<cang_ku.length;j++){
          if(cang_ku[j] == "樱桃"){      
              a++
          }else if (cang_ku[j] == "番茄"){
              b++
          }else if (cang_ku[j] == "橘子"){
              c++
          }else if (cang_ku[j] == "茄子"){
              d++
          }
      }
      table_a.innerHTML="樱桃:"+a
      table_b.innerHTML="番茄:"+b
      table_c.innerHTML="橘子:"+c 
      table_d.innerHTML="茄子:"+d 
  }
  
  //定时器
  var game = setInterval(function () {
      for (var i = 0; i < kuai.length; i++) {
          if (kuai[i].status == "zhang") {
              if (kuai[i].start_time >= kuai[i].all_time) {
                  kuai[i].status = "chengshu"
                  kuai[i].innerHTML = str + "<span>可采摘</span>"
              } else {
                  kuai[i].start_time += 1000
                  var  dao_time =kuai[i].all_time - kuai[i].start_time
                  dao_time = time(dao_time)
                  kuai[i].innerHTML = str+"<span>"+dao_time+"</span>"
              }
          }
      }
  }, 1000);
  
  //时间标准化
  function time(n) {
      var miao_all = parseInt(n / 1000)
      var fen = parseInt(miao_all / 60)
      var miao = miao_all % 60
      if (fen < 10) {
          fen = "0" + fen
      }
      if (miao < 10) {
          miao = "0" + miao
      }
      var time = fen + ":" + miao
      return time
  }
  //延时器 
  setInterval(function() {
      for (var i = 0; i < kuai.length; i++) {
          if(kuai[i].status=="chengshu"){
              kuai[i].children[1].id="chengshu"
              // var one_div = document.createElement("div")
              // var a = kuai[i].getAttribute("sx")
              // one_div.style.backgroundImage = "url(./nc/" + a + ".png)"
              // one_div.style.width="100px"
              // one_div.style.height="100px"
              // kuai[i].append(one_div)
              // kuai[i].style.backgroundImage = "url(./nc/" + a + ".png)"
          }
      }
  }, 100);
  </script>
  